<template>
    <form-field :dirty="dirty" @valid="onValid">
        <form-select 
        :multiple="multiple"
        :value="dirty" 
        :disabled="disabled" 
        :placeholder="placeholder" 
        :align="align"
        :type="type"
        @change="onChange"><slot></slot></form-select>
    </form-field>
</template>
<script lang="ts">
import { defineComponent, Ref, ref } from 'vue'
import FormField from './field.vue'
import FormSelect from './select/select.vue'
export default defineComponent({
    components:{FormField,FormSelect},
    props:{
        type:{
            type:String,
        },
        placeholder:{
            type:String
        },
        disabled:{
            type:Boolean
        },
        multiple:{type:Boolean,default:false},
        value:{type:[String,Number,Array]},
        align:{type:String,default:'left'}
    },
    setup(props,{emit}) {
        const dirty = ref(props.value)
        const onChange = (v:string|number|Array<string|number>)=>{
            dirty.value = v
        }
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            onValid,
            onChange,
            dirty
        }
    },
})
</script>
